<!DOCTYPE html>
<html lang="en">

<head>
	<title>
		<%= title %>
	</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="keywords" content="" />
	<link rel="stylesheet" type="text/css" href="/lib/bootstrap/dist/css/bootstrap.min.css">
	<link href="/stylesheets/style.css" rel="stylesheet" type="text/css" media="all" />
	<link href="/stylesheets/animate.min.css" rel="stylesheet">

	<script src="/lib/jquery/dist/jquery.min.js"></script>
	<script src="/lib/bootstrap/dist/js/bootstrap.min.js"></script>
</head>

<body>
	<!-- banner -->
	<!-- flag : 1首页   2 为数学页！只是为了去掉不用的部分	-->
	<%- include("../main/banner",{flag:1})  %>
		<div class="w3agile_banner_info_kjx">
			<div class="container">
				<div class="col-md-12 column" style="padding-bottom:5px;">
					<label class="label label-info">
						小朋友，下面这些题你可以做对多少呢！全对了有小花哟!!! 我来帮你记分吧！
						<span id="mess"></span>
					</label>
				</div>
				<div class="col-md-12 column">
					<% 
				var l = 3;
				var as = question;
				var rows = parseInt(Math.ceil(as.length / l));
				for(var j = 0;j < rows;j++){
					%>
						<div class="row clearfix" style="padding-bottom:5px;">
							<% 
						for(var i= (j)*l;i< ((j < rows-1)?((j+1)*l):as.length);i++){
						%>
								<div class="col-md-4 column">
									<span class="label label-primary questdivbg">
										<label style="width:30px;">
											<%= as[i].first%>
										</label>
										<label>+</label> &nbsp;
										<label style="width:30px;">
											<%= as[i].second%>
										</label> =
										<input class='label-success' placeholder="答案是多少呢！?" />
										<span></span>
									</span>
								</div>
								<% 
						}
						%>
						</div>
						<% 
				}
				%>
				</div>
			</div>
		</div>
		<!-- footer -->
		<%- include ../main/bottom %>
</body>

//少统yf !以及换一批操作！ 前台没有与后台所有数据完全互动！可以提供相应的参数设计 页面 //如出题 量 最大数 运算数 最大值 结果最大值 等操作

<script>
	$(document).ready(function () {
		var score = 0;
		totalNo(score);
		//运算处理
		$("div > span.label.label-primary > input").change(function () {
			var f = $(this).parent().find("label:eq(0)").text();
			var s = $(this).parent().find("label:eq(1)").text();
			var t = $(this).parent().find("label:eq(2)").text();
			if ((parseInt(f) + parseInt(t)) == parseInt($(this).val())) {
				$(this).parent().attr("class", "").addClass("label").addClass("label-success");
				$(this).attr("disabled", "disabled");
				score += 1;
				totalNo(score);
				$(this).next("span").text('儿子！你太棒了!!!');
			} else {
				$(this).parent().attr("class", "").addClass("label").addClass("label-danger");
				$(this).next("span").text('加油，相信自己!!!');
			}
		});

	});

	function totalNo(score) {
		if (score == 0) {
			$("#mess").text('快来试一试吧!!!');
		} else if (score > 0) {
			$("#mess").text("共有" + score + "道题答对了");
		}
	}

</script>

</html>